<template>
    <div>
        <div class="top">
            <img src="../../static/img/zuo.png" alt="" class="img_fo fdj" @click="$router.push('/mine')">
            <img src="https://img02.camel.com.cn/image/you_logo_20171109.jpg" alt="" class="logo">
            <img src="../../static/img/message.png" alt="" class="img_fo fenxiang">
        </div>
        <div>
            <div class="content_wp">
                <form>
                    <div style="position:relative;">
                        <input type="text" class="ipt" placeholder="用户名/手机号/邮箱" @blur="username" v-model="form.userName">
                        <p v-if="bloos" class="errors">请输入正确的手机号</p>
                        <div class="cha_wp">
                            <img src="../../static/img/cha.png" alt="" class="cha" @click="form.userName=''">
                        </div>
                    </div>
                    <div style="position:relative;">
                        <input type="password" class="ipt" placeholder="密码" @blur="password" v-model="form.password">
                        <p v-if="bloos" class="errors">密码长度6-16，包括字母、数字、下划线</p>
                        <div class="cha_wp">
                            <img src="../../static/img/cha.png" alt="" class="cha" @click="form.password=''">
                        </div>
                    </div>
                    <button class="login_btn" @click="login()">登录</button>
                </form>
                <div class="caozuo">
                    <p @click="$router.push('/zhuce')">快速注册</p>
                    <p>忘记密码</p>
                </div>
                <div class="shouquan">
                    <div class="shouquan_wp">
                        <img src="" alt="">
                        <span>QQ</span>
                    </div>
                    <div class="shouquan_wp">
                        <img src="" alt="">
                        <span>支付宝</span>
                    </div>
                    <div class="shouquan_wp">
                        <img src="" alt="">
                        <span>微博</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { mapMutations } from "vuex";
export default {
    data() {
        return {
            form: {
                userName: "",
                password: ""
            },
            bloos: false,
            bloo: false
        };
    },
    methods: {
        ...mapMutations('mine',['reviseShow','falShowMine']),
        username() {
            const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
            if (this.form.userName == "" || !reg.test(this.form.userName)) {
                this.bloos = true;
                return false;
            } else {
                this.bloos = false;
            }
        },
        password() {
            const regPw = /^(\w){6,16}$/;
            if (this.form.password == "" || !regPw.test(this.form.password)) {
                this.bloo = true;
                return false;
            } else {
                this.bloo = false;
            }
        },
        login() {
            axios({
                url:
                    "http://localhost/api.php/camel/user?transform=1&filter=userName,eq," +
                    this.form.userName,
                method: "get"
            }).then(res => {
                console.log(res);
                // console.log(res);
                if (res.data.user) {
                    if (this.form.password == res.data.user[0].password) {
                        sessionStorage.setItem(
                            "user",
                            JSON.stringify(res.data.user[0])
                        );
                        this.reviseShow();
                        this.$router.push("/mine");
                    } else {
                        alert("用户名或者密码错误");
                    }
                }
            });
        }
    },
    mounted() {
        if (sessionStorage.getItem("user")) {
            var users = JSON.parse(sessionStorage.getItem("user"));
            this.form.userName = users.userName;
            this.form.password = users.password;
        }
    }
};
</script>

<style>
* {
    margin: 0;
    padding: 0;
}
img {
    border: none;
    display: block;
}
.shouquan_wp {
    display: flex;
    align-items: center;
}
.shouquan_wp img {
    height: 0.156rem;
}
.shouquan_wp span {
    font-size: 0.11rem;
    margin-left: 0.063rem;
    margin-top: 0.02rem;
}
.shouquan {
    margin-top: 0.64rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.caozuo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.106rem;
}
.caozuo p {
    font-size: 0.1rem;
    color: #999;
}
.login_btn {
    color: #a2821b;
    letter-spacing: 3px;
    border: 1px solid #c3a851;
    text-align: center;
    border-radius: 3px;
    /* width: 2.843rem; */
    width: 100%;
    height: 0.398rem;
    margin-top: 0.16rem;
    background-color: #fff;
    font-size: 0.12rem;
}
.ipt {
    /* width: 2.843rem; */
    width: 100%;
    height: 0.398rem;
    border-radius: 5px;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.13rem;
    outline: none;
}
.cha {
    height: 0.141rem;
    width: 0.141rem;
}
.cha_wp {
    height: 0.141rem;
    width: 0.141rem;
    background-color: #d9d9d9;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0.1rem;
    transform: translateY(-50%);
}
.content_wp {
    padding: 0.3rem 0.13rem 0.13rem 0.13rem;
    height: 100%;
}
.top {
    height: 0.384rem;
    width: 100%;
    display: flex;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
}
.img_fo {
    height: 0.203rem;
    width: 0.19rem;
    top: 0.1rem;
    /* top: 9px; */
    position: absolute;
    line-height: 1.5;
}
.fdj {
    height: 0.203rem;
    width: 0.203rem;
    left: 0.15rem;
}
.logo {
    width: 0.704rem;
}
.fenxiang {
    right: 20px;
}
</style>
